import React, { Component } from 'react';
import { Stepper } from 'antd-mobile'
import { withRouter  } from 'react-router-dom'


import './FoodList.scss'
class FoodList extends Component {
    constructor(props) {
        super(props);
        this.goodListRef = React.createRef()
        this.state = {
            activeTab:0,
        }
        this.tagList = [] //这个不参与页面渲染  不需要放在state
    }

    goFoodDetail(e){

        this.props.setStoreIndexState('viewNowGoodsID',e.id)
        // localStorage.setItem('foodsData',JSON.stringify(e))
        this.props.history.push('/store/home/goods');
    }

    tabTarget(e){
        try{
            this.goodListRef.current.scrollTo(0,this.tagList[e].top)
        }catch(e){
            console.error(e)
        }
    }

    componentDidUpdate(){
        this.createFoodScrollEvent()
    }

    createFoodScrollEvent(){

        if(this.props.foodsData.length == 0 ) return;

        const goodListDom = this.goodListRef.current
        let tmp = this.props.foodsData.map((el,index)=>{
            return {
                name:el.name,
                index:index
            }
        })
        for(let i = 0 ; i < goodListDom.children.length ; i ++){
            tmp[i].top = goodListDom.children[i].offsetTop
        }
        
        this.tagList = tmp
        
        goodListDom.addEventListener('scroll',(e)=>{
            let tmpData = tmp.filter(el=>{return el.top <= e.target.scrollTop})
            if(this.state.activeTab != tmpData[tmpData.length-1].index){
                this.setState({
                    activeTab:tmpData[tmpData.length-1].index
                })
            }
            
        })
    }

    render() {
        return (
            <div className="foodList">
                <div className="tagList">
                    {this.props.foodsData.map((el,index)=>{
                        return (
                            <div className={`tag ${this.state.activeTab == index?'tag-active':''} `} key={index} onClick={()=>{this.tabTarget(index)}}>
                                <div className="text">{el.name}</div>
                            </div>
                        )
                    })}
                </div>
                <div className="goodsList" ref={this.goodListRef} >
                    {this.props.foodsData.map((el,index)=>{
                        return (
                            <div className="goods-block" key={index}>
                                <div className="goods-block-name">{el.name}</div>
                                <div className="goods-block-list">
                                {el.foods.map((foods,foodsindex)=>{
                                    return (
                                       
                                        <div className="goods-block-list-item" key={foodsindex} onClick={()=>{this.goFoodDetail(foods)}}>
                                            <div className="foodimage">
                                                <img src={foods.icon}></img>
                                            </div>
                                            <div className="info">
                                                <div className="title">{foods.name}</div>
                                                <div className="desc">{foods.description}</div>
                                                <div className="evaluation">
                                                    <span>月售{foods.sellCount}份</span>
                                                    <span className="mgl24">好评率{foods.rating}%</span>
                                                </div>
                                                <div className="price-count">
                                                    <div className="price">
                                                        <span className="new-price">￥{foods.price}</span>
                                                        {foods.oldPrice?<span className="old-price">￥{foods.oldPrice}</span>:''}
                                                    </div>
                                                    <div className="count" onClick={(e)=>{e.stopPropagation()}}>
                                                        <Stepper
                                                            style={{    
                                                                '--border-inner': 'none',
                                                                '--button-background-color': '#F8F9FA',
                                                                '--height': '1.5rem',
                                                                '--active-border': '1px solid #1677ff',
                                                            }}
                                                            min={0}
                                                            value={foods.count}
                                                            onChange={value => {
                                                                this.props.setCount(index,foodsindex,value)
                                                            }}
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                                    
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        );
    }
}
 
export default withRouter(FoodList);